import React,{useState} from 'react'
import './khgl.css';
import { Button,Input,Checkbox,Table,Pagination,Modal,Cascader  } from 'antd'

import xzjh from '../../../static/images/xzjh.png'

export default function KHGL() {
    let data=[
        {
            key:1,
            name:'北京西天取经科技有限公司',
            a1:'-',
            a2:'-',
            a3:'-',
            a4:'-',
            a5:'-',
            a6:'-',
        },
        {
            key:2,
            name:'张泽良13333333333',
            a1:'是',
            a2:'-',
            a3:'-',
            a4:'-',
            a5:'-',
            a6:100,
        },
        {
            key:3,
            name:'华采科技(北京)有限公司',
            a1:'是',
            a2:'是',
            a3:'是',
            a4:80,
            a5:51,
            a6:30,
        },
        {
            key:4,
            name:'百度网络科技有限公司',
            a1:'-',
            a2:'是',
            a3:'-',
            a4:1000,
            a5:30,
            a6:80,
        }
        
    ];
    let col=[
        {
            title:'客户名称',
            dataIndex:'name',
            key:'name',
            align:'center'
        },
        {
            title:'有未开始的租期',
            dataIndex:'a1',
            key:'a1',
            align:'center'
        },
        {
            title:'租期进行中',
            dataIndex:'a2',
            key:'a2',
            align:'center'
        },
        {
            title:'有已结束的租期',
            dataIndex:'a3',
            key:'a3',
            align:'center'
        },
        {
            title:'曾驻最大面积(㎡）',
            dataIndex:'a4',
            key:'a4',
            align:'center'
        },
        {
            title:'已驻天数(天）',
            dataIndex:'a5',
            key:'a5',
            align:'center'
        },
        {
            title:'待驻天数(天）',
            dataIndex:'a6',
            key:'a6',
            align:'center'
        }
    ];

    // const showTotal = (total) => `Total ${total} items`;
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [isModalOpen1, setIsModalOpen1] = useState(false);

    const showModal = () => {
      setIsModalOpen(true);
    };
    const handleOk = () => {
      setIsModalOpen(false);
    };
    const handleCancel = () => {
      setIsModalOpen(false);
    };

    const showModal1 = () => {
        setIsModalOpen1(true);
      };
      const handleOk1 = () => {
        setIsModalOpen1(false);
      };
      const handleCancel1 = () => {
        setIsModalOpen1(false);
      };
      // 级联选择器
      const options = [
        {
          value: 'zhejiang',
          label: 'Zhejiang',
          children: [
            {
              value: 'hangzhou',
              label: 'Hangzhou',
              children: [
                {
                  value: 'xihu',
                  label: 'West Lake',
                },
              ],
            },
          ],
        },
        {
          value: 'jiangsu',
          label: 'Jiangsu',
          children: [
            {
              value: 'nanjing',
              label: 'Nanjing',
              children: [
                {
                  value: 'zhonghuamen',
                  label: 'Zhong Hua Men',
                },
              ],
            },
          ],
        },
      ];
      const onChange = (value) => {
        console.log(value);
      };
    return (
        <>
           <div className='wp3'>
                {/* 顶部按钮 */}
                <div className="top">
                    <Button type='primary' style={{background:'#8479E3',width:'96px',height:'32px',marginRight:'1.5%'}} onClick={showModal1}>新建客户</Button>
                    <Button type='primary' style={{background:'#8479E3',width:'96px',height:'32px',color:'#fff'}} onClick={showModal}>批量导入</Button>
                </div>
                {/* 批量导入 */}
                <Modal style={{height:'297px',width:'480px',display:'flex',flexDirection:'column',alignItems:'center'}} title="批量导入客户" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} footer={null}>
                    <div style={{width:'432px',borderTop:'1px #ccc solid',borderBottom:'1px #ccc solid'}}>
                       <p style={{color:'#999',fontSize:'12px',marginTop:'3%'}}>温馨提示:</p>
                       <p style={{color:'#999',fontSize:'12px'}}>根据模板内的“填写须知”填写客户信息后，将模板Exce上传至此处即可批量导入！</p>
                       <Button style={{width:'80px',background:'#8479E3',color:'#fff',height:'30px',fontSize:'12px',display:'flex',alignItems:'center',margin:'4% 0',flexDirection:'column'}} onClick={handleOk}>下载模板</Button>
                    </div>
                    <div style={{width:'432px',height:'118px',border:'1px #ccc dotted',margin:'5% 0',display:'flex',justifyContent:'center',alignItems:'center',flexDirection:'column'}}>
                        <img src={require('../../../static/images/形状.png')} style={{width:'50px',height:'50px',marginBottom:'2%'}} alt="" />
                        <span style={{color:'#ccc',fontSize:'12px'}}>上传文件</span>
                    </div>
                    <div style={{marginTop:'2%',width:'100%'}}>
                        <Button style={{width:'120px',background:'#8479E3',color:'#fff',margin:'0 auto',display:'block'}} onClick={handleOk}>确定</Button>
                    </div>
                </Modal>
                {/* 新建客户 */}
                <Modal style={{height:'297px',width:'480px',display:'flex',flexDirection:'column',alignItems:'center'}} title="新建客户" open={isModalOpen1} onOk={handleOk1} onCancel={handleCancel1} footer={null}>
                    
                    <div style={{width:'432px',borderTop:'1px #ccc solid',margin:'5% 0',display:'flex',justifyContent:'space-between',flexDirection:'column'}}>
                        <p style={{marginTop:'3%'}}>客户信息</p>
                        <div style={{display:'flex',justifyContent:'space-between'}}>
                            <div style={{width:'216px',margin:'3% 0'}}>
                                <p style={{marginTop:'2%'}}>
                                <span style={{color:'#f00',marginRight:'1.5%'}}>*</span>
                                <span style={{color:'#999',fontSize:'14px'}}>客户名称</span>
                                </p>
                                <Input style={{marginTop:'3%',width:'206px',height:'36px',borderRadius:'2px',fontSize:'12px',backgroundColor:'#F8FBFF'}} placeholder='请输入联系人姓名'/>
                                <span style={{marginTop:'5%',color:'#999',fontSize:'14px',display:'block'}}>行业</span>
                                <Cascader options={options} onChange={onChange} style={{marginTop:'3%',width:'206px',height:'36px',borderRadius:'0',fontSize:'12px'}} placeholder='请输入联系人邮箱'/>
                            </div>
                            <div style={{width:'216px',margin:'3% 0'}}>
                                <p style={{marginTop:'2%'}}>
                                <span style={{color:'#f00',marginRight:'1.5%'}}>*</span>
                                <span style={{color:'#999',fontSize:'14px'}}>客户类型</span>
                                </p>
                                <Input style={{marginTop:'3%',width:'206px',height:'36px',borderRadius:'2px',fontSize:'12px',backgroundColor:'#F8FBFF'}} placeholder='请输入联系人姓名'/>
                                <span style={{marginTop:'5%',color:'#999',fontSize:'14px',display:'block'}}>人员规模</span>
                                <Input style={{marginTop:'3%',width:'206px',height:'36px',borderRadius:'2px',fontSize:'12px',backgroundColor:'#F8FBFF'}} placeholder='请输入联系人邮箱'/>
                            </div>
                        </div>
                    </div>
                    <div style={{marginTop:'2%',width:'100%'}}>
                        <Button style={{width:'120px',background:'#8479E3',color:'#fff',margin:'0 auto',display:'block'}} onClick={handleOk1}>确定</Button>
                    </div>
                </Modal>
                <div className="mid">
                    <div className="mid1">
                        <Input placeholder='请输入客户名称'/>
                        <div className="mid1a">
                            <p>租期状态</p>
                            <Checkbox className='aa' style={{fontSize:'12px',color:'#747B8B'}}>有未开始的租期</Checkbox>;
                            <Checkbox className='aa' style={{fontSize:'12px',color:'#747B8B'}}>租期进行中</Checkbox>;
                            <Checkbox className='aa' style={{fontSize:'12px',color:'#747B8B'}}>有已结束的租期</Checkbox>;
                        </div>

                        <div className="mid1b">
                            <div>
                                <p>曾驻最大面积</p>
                                <Input/>
                                <span>㎡</span>
                                <span>~</span>
                                <Input/>
                                <span>㎡</span>
                            </div>
                            <div>
                                <p>已驻天数</p>
                                <Input/>
                                <span>㎡</span>
                                <span>~</span>
                                <Input/>
                                <span>㎡</span>
                            </div>
                            <div>
                                <p>待驻天数</p>
                                <Input/>
                                <span>㎡</span>
                                <span>~</span>
                                <Input/>
                                <span>㎡</span>
                            </div>
                        </div>
                    </div>
                    <div className="shouqi">
                        <span></span>
                        <div>
                            <img src={xzjh} alt="" />
                            <p>收起筛选</p>
                        </div>
                    </div>
                    <div className="mid-bot">
                        <Button type='primary' style={{background:'#8479E3'}}>查询</Button>
                        <Button type='primary' style={{background:'#f1f0f9',color:'#999cb2'}}>重置</Button>
                    </div>
                </div>

                <div className="list" style={{overflow:'hidden'}}>
                    <Table 
                        style={{width:'100%'}}
                        dataSource={data}
                        columns={col}
                        pagination={false}
                    />
                <Pagination className='pag1' size="small" total={50} showSizeChanger showQuickJumper />
                </div>
            </div> 
        </>
    )
}
